  /*
  1. 发送请求获取数据
  2. 点击轮播图 预览大图
     2.1 给轮播图绑定点击事件
     2.2 调用小程序的api previewImage
  3.点击 加入购物车
     1.先绑定点击事件
     2.获取缓存中的购物车数据 数组格式
     3.先判断 当前的商品是否已经存在 于 购物车
     4.如果已经存在 修改商品数量 执行购物车数量++ 重新把购物车数组填充回缓存中 
     5.如果不存在于购物车数组中 直接给购物车数组添加一个新元素（新元素 带上购买数量属性 num 重新把购物车数组填充回缓存中）  
     6.弹出提示
  4.商品收藏
    1.页面onShow的时候 加载缓存中的商品收藏的数据
    2.判断当前商品是不是被收藏
      1.是  改变页面的图标
      2.不是 。。不管它
    3.点击商品收藏按钮
      1.判断该商品是否存在于缓存数组中
      2.已经存在，把该商品删除
      3.不存在， 把商品添加到收藏数组中 再存入到缓存中即可
   */

import { request } from '../../request/index';
Page({
  /* 页面的初始数据*/
  data: {
    //商品详情数据
    goodsDetail: {},
    //商品是否被收藏过
    isCollect:false
  },
  //商品数据对象
  GoodsInfo:{}, 
  /* 生命周期函数--监听页面加载*/
  onShow: function () {
   // 1.获取当前的小程序的页面栈-数组  它的长度最大是10页面
    let  pages =  getCurrentPages();
    let currentPage = pages[pages.length-1];
    let options = currentPage.options;
    const { goods_id } = options; //赋值传过来的商品id
    this.getgoodsDetail(goods_id);
     
  },

  //获取商品详情数据   //通过点击商品列表的商品，顺便把该商品的good_id传过来
  async getgoodsDetail(goods_id) {
    const res = await request({
      url: "/goods/detail",
      data: {
        goods_id
      }
    })
    this.GoodsInfo = res;   //数据赋值
    // 1.获取缓存中的商品收藏数组 转成空数组 （因为里面有可能是有数据的数组或空数组）
    let collect = wx.getStorageSync("collect")||[];
    // 2.判断当前商品是否被收藏 some()它接收一个回调函数，只要里面返回一个true整个表达式就返回true
    let isCollect = collect.some(v=>v.goods_id === this.GoodsInfo.goods_id);   //返回true表示有该商品
    this.setData({ //数组赋值
      goodsDetail: {
        goods_name: res.goods_name,
        goods_price: res.goods_price,
        // iphone部分手机 不识别webp图片格式
        // 最好找后台 让他进行修改 ，临时自己改（确保后台存在1.wepb => 1.jpg）
        goods_introduce: res.goods_introduce.replace(/\.wepb/g,'.jpg'),
        pics: res.pics
      },
      isCollect
    })

  },
  // 点击轮播图 放大预览
  handlePrevewImage(e){
    // 1 先构造要预览的图片数组
    const urls = this.GoodsInfo.pics.map(v=>v.pics_mid)  //遍历需要的图片
    //接收点击图片传过来图片url
    const current = e.currentTarget.dataset.url
    console.log(e);
    //新页面中全屏预览图片
    wx.previewImage({
      current: current,  // 当前显示图片的http链接
      urls: urls    // 需要预览的图片http链接列表
    })
  },
  
  // 点击加入购物车
  handleCartAdd(){
    // 1.获取缓存中的购物车 假如一开始没有数据就是 空数组
    let cart = wx.getStorageSync("cart") || [];  //一开始数组肯定是空的
    console.log(cart);
    // 2.判断 商品对象是否存在于购物车数组中
    // findIndex 获取数组中符合条件的第一个元素索引位置
    const index = cart.findIndex( v=> v.goods_id === this.GoodsInfo.goods_id) // -1 0 1...
    console.log(index);
    if (index === -1) {
      // 3. 不存在  第一次添加商品
      this.GoodsInfo.num = 1; //第一次添加，数量等于1
      this.GoodsInfo.checked = true; // 加入购物车商品选中的状态
      cart.push(this.GoodsInfo)  //添加商品
    }else{
      // 4.已经存在购物车数据执行 num++
      cart[index].num++;
    }
    // 5. 把购物车重新添加回缓存中
    wx.setStorageSync("cart", cart);
    // 6. 弹出提示
    wx.showToast({
      title: '加入成功',
      icon: 'success',
      //是否显示透明蒙层，防止触摸穿透
      mask:true  //防止用户连接点击按钮，只让点一次1.5s后才能再点击
    });
  },

  // 点击商品收藏图标
  handleCollect(){
    let isCollect = false;
    // 1.获取缓存中的商品收藏数组 转成空数组 （因为里面有可能是有数据的数组或空数组）
    let collect = wx.getStorageSync("collect")||[];
    // 2.判断该商品是否被收藏过 findIindex() 返回符合条件的元素的一个索引值
    let index = collect.findIndex(v=>v.goods_id === this.GoodsInfo.goods_id) 
    // 3.当index！= -1 表示已经收藏过了
    if (index !== -1) {
      // 能找到  已经收藏过了 在数组中删除该商品
      collect.splice(index, 1);
      isCollect = false;
      wx.showToast({   //弹窗提示
        title: '取消成功',
        icon: 'success',
        mask: true,
      });
    }else{
      //没有收藏过
      collect.push(this.GoodsInfo);
      isCollect = true;
      wx.showToast({   //弹窗提示
        title: '收藏成功',
        icon: 'success',
        mask: true,
      });
    }
    // 4.把数组存入到缓存中
    wx.setStorageSync("collect",collect)
    // 5.修改data中属性 isCollect
    this.setData({
      isCollect
    })
  }
})